<template>
    <div class="px-13px py-13px bg-#3f3f3f">
        <div class="flex justify-between items-center text-15px font-bold">
            <div>- 发布新游戏</div>
            <div class="flex items-center gap-4px" @click="emit('back')">
                <i class="backIcon"></i>
                <span>返回</span>
            </div>
        </div>

        <div class="space-y-20px mt-20px px-11px">
            <div class="form-item">
                <span>游戏名称：</span>
                <div><nut-input v-model="formData.name" class="input"></nut-input></div>
            </div>
            <div class="form-item">
                <span>游戏副标题：</span>
                <div><nut-input v-model="formData.subtitle" class="input"></nut-input></div>
            </div>
            <div class="form-item">
                <span>封面图1：</span>
                <div>
                    <UploadFile v-model:file="formData.cover" accept="image/jpg, image/png, image/gif"
                                :maximize="1024 * 1024">
                        <template #hint>
                            <div class="upload-hint">
                                *此图为横长方形<br>
                                图片档案大小限制为1M的<br>
                                JPG.PNG.GIF
                            </div>
                        </template>
                    </UploadFile>
                </div>
            </div>
            <div class="form-item">
                <span>封面图2：</span>
                <div>
                    <UploadFile v-model:file="formData.cover2" accept="image/jpg, image/png, image/gif"
                                :maximize="1024 * 1024">
                        <template #hint>
                            <div class="upload-hint">
                                *此图方形或直长条形为佳<br>
                                图片档案大小限制为1M的<br>
                                JPG.PNG.GIF
                            </div>
                        </template>
                    </UploadFile>
                </div>
            </div>
            <div class="form-item">
                <span>游戏展示图：</span>
                <div>
                    <UploadFile v-model:file="formData.covers" accept="image/jpg, image/png, image/gif"
                                :maximize="1024 * 1024">
                        <template #hint>
                            <div class="upload-hint">
                                *最多上传5张<br>
                                图片档案大小限制为1M的<br>
                                JPG.PNG.GIF
                            </div>
                        </template>
                    </UploadFile>
                </div>
            </div>
            <div class="form-item">
                <span>封面视频：</span>
                <div>
                    <UploadFile v-model:file="formData.cover_video" accept="video/mp4, video/avi"
                                :maximize="1024 * 1024" type="video">
                        <template #hint>
                            <div class="upload-hint">
                                *视频档案大小限制为1M的<br>
                                MP4.AVI
                            </div>
                        </template>
                    </UploadFile>
                </div>
            </div>
            <div class="form-item">
                <span>游戏简介：</span>
                <div>
                    <nut-textarea v-model="formData.description" :rows="5" autosize class="rounded-5px"></nut-textarea>
                </div>
            </div>
            <div class="form-item">
                <span>类型标签：</span>
                <div class="space-y-14px">
                    <nut-input class="select" readonly>
                        <template #right>
                            <triangle-down color="#1c1c1c" size="8px"></triangle-down>
                        </template>
                    </nut-input>
                    <nut-input class="select" readonly>
                        <template #right>
                            <triangle-down color="#1c1c1c" size="8px"></triangle-down>
                        </template>
                    </nut-input>
                    <nut-input class="select" readonly>
                        <template #right>
                            <triangle-down color="#1c1c1c" size="8px"></triangle-down>
                        </template>
                    </nut-input>
                </div>
            </div>
            <div class="form-item">
                <span>上传安装包：</span>
                <div>
                    <nut-uploader url="https://xxxx">
                        <div class="upload">
                            <img src="@/assets/upload-file-icon.webp" alt="">
                            <span>上传</span>
                        </div>
                        <div class="upload-hint">
                            *档案大小限制为1M的<br>
                            APK
                        </div>
                    </nut-uploader>
                </div>
            </div>
            <div class="form-item">
                <span>安装包連結：</span>
                <div>
                    <nut-input class="input"></nut-input>
                </div>
            </div>
            <div class="form-item">
                <span>安装包大小：</span>
                <div>
                    <nut-input class="input"></nut-input>
                </div>
            </div>
            <div class="form-item">
                <span>适配系统：</span>
                <div class="grid grid-cols-2 gap-10px">
                    <div v-for="item in systemList" :key="item.value"
                         class="bg-#fff text-#000 h-30px rounded-full text-center leading-30px text-12px"
                         :class="{ activeSystem: activeSystem === item.value }" @click="activeSystem = item.value">
                        {{
                            item.name
                        }}
                    </div>
                </div>
            </div>
            <div class="form-item">
                <span>适配平台：</span>
                <div class="flex items-end">
                    <nut-checkbox-group v-model="formData.platform">
                        <nut-checkbox v-for="item in platformList" :key="item.value" :label="item.value"
                                      class="!text-#fff">
                            {{ item.name }}
                            <template #checkedIcon>
                                <div class="w-23px h-23px bg-#fff rounded-full flex items-center justify-center">
                                    <div class="w-13px h-13px bg-#000 rounded-full"></div>
                                </div>
                            </template>
                            <template #icon>
                                <div class="w-23px h-23px bg-#fff rounded-full flex items-center justify-center">
                                </div>
                            </template>
                        </nut-checkbox>
                    </nut-checkbox-group>
                    <div class="text-12px text-#9e9e9e">
                        *可复选
                    </div>
                </div>
            </div>
            <div class="form-item">
                <span>游戏详情：</span>
                <div>
                    <nut-textarea v-model="formData.content" :rows="5" autosize class="rounded-5px"></nut-textarea>
                </div>
            </div>
        </div>

        <!-- 返回最上层 -->
        <div class="text-center mb-37px mt-40px flex flex-col items-center gap-19px">
            <nut-button class="!w-250px !h-33px !bg-#000000 !border-none !text-#fff !text-12px font-bold"
                        @click="toTop">
                返回最上层
            </nut-button>
            <nut-button class="!w-250px !h-33px !bg-#d961b2 !border-none !text-#fff !text-12px font-bold"
                        @click="handleSubmit">
                提交申请
            </nut-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TriangleDown } from '@nutui/icons-vue'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'

const emit = defineEmits(['back'])
const gameDesc = ref('')
const formData = ref({
    'name': '',
    'subtitle': '',
    'cover': '', //封面
    'cover2': '', //封面2
    'covers': '', //多图
    'cover_video': '', //视频
    'description': '', //简介
    'version': '', //版本
    'category_ids': '', //分类
    'os': 'Android', //('Android', 'iOS', 'Windows', 'Mac'
    'platform': [],
    'size': '', //大小
    'content': '', //详情
    'download_url': ''
})
// 适配系统列表
const activeSystem = ref('Android')
const systemList = ref([
    { name: 'Android', value: 'Android' },
    { name: 'iOS', value: 'iOS' },
    { name: 'Windows', value: 'Windows' },
    { name: 'Mac', value: 'Mac' }
])
// 适配平台列表
const platformList = ref([
    { name: '浏览器', value: 'Browser' },
    { name: '移动设备', value: 'Mobile' }
])
// 返回最上层
const toTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

const handleSubmit = () => {
    axiosService.post('/api/publisher/Game/addAndUpdateGame', formData.value).then(res => {
        console.log(' res -->', res)
    }).catch(err => {
        showNotify.danger(err.msg)
    })
}
</script>

<style scoped lang="scss">
.backIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../../../../assets/back.png') no-repeat center;
    background-size: contain;
}

.form-item {
    display: flex;
    // align-items: center;

    &>span {
        white-space: nowrap;
        font-size: 14px;
        flex: 1;
        margin-top: 6px;
    }

    &>div {
        width: 250px;
    }

    :deep(.input) {
        height: 38px !important;
        border-radius: 5px;

        .nut-input-inner,
        .nut-input-box {
            height: 100% !important;
        }

        input {
            color: #000;
        }
    }

    :deep(.select) {
        border-radius: 999px;
        height: 30px;
    }

    :deep(.nut-textarea) {
        padding: 10px;

        .nut-textarea__textarea {
            margin: 0 !important;
        }
    }

    .upload {
        width: 77px;
        height: 77px;
        border-radius: 5px;
        background: #1f1f1f;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 12px;
        color: #fff;
        line-height: 1;
        gap: 10px;

        img {
            width: 19px;
        }
    }

    .upload-hint {
        position: absolute;
        left: calc(100% + 18px);
        top: 50%;
        transform: translateY(-50%);
        font-size: 9px;
        line-height: 16px;
        color: #c9c9c9;
        width: fit-content;
        white-space: nowrap;
        text-align: center;
    }

    .activeSystem {
        background: #000;
        color: #fff;
    }

    :deep(.nut-checkbox) {
        .nut-checkbox__label {
            color: #fff;
            margin-left: 7px;
            font-size: 12px;
        }
    }
}
</style>
